<template>
    <div class="common-layout">
      <el-container>
        <!-- 顶部 -->
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
          >
          <!-- 标题 -->
            <el-menu-item index="0" class="logo">
              <span>人人租后台管理</span>
            </el-menu-item>
            <!-- 头像 -->
            <el-avatar :size="50">
                <img src="../../assets/1.jpg" alt="">
            </el-avatar>
            <!-- 用户 -->
            <el-sub-menu index="2">
              <template #title>用户名</template>
              <el-menu-item index="2-1">个人信息</el-menu-item>
              <el-menu-item index="2-2">修改密码</el-menu-item>
              <el-menu-item index="2-3">退出登录</el-menu-item>
              <el-menu-item index="2-4">返回主页</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>

        <el-container>
            <!-- 侧边栏 -->
          <el-aside width="180px">
            <el-row class="tac">
              <el-col :span="12">
                <el-menu
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  router
                >
                  <el-menu-item index="1">
                    <el-icon><setting /></el-icon>
                    <span>首页</span>
                  </el-menu-item>
                  <el-menu-item index="2">
                    <el-icon><setting /></el-icon>
                    <span>Navigator Four</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <el-icon><setting /></el-icon>
                    <span>客户反馈</span>
                  </el-menu-item>
                  <el-sub-menu index="5">
                    <template #title>
                      <el-icon><location /></el-icon>
                      <span>系统管理</span>
                    </template>
                    <el-menu-item index="/index/userManage">用户管理</el-menu-item>
                    <el-menu-item index="/index/order">订单管理</el-menu-item>
                    <el-menu-item index="1-3">item three</el-menu-item>
                    <el-menu-item index="1-5">item three</el-menu-item>
                    <el-sub-menu index="1-4">
                      <template #title>item four</template>
                      <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu>
                  </el-sub-menu>
                  <el-menu-item index="3">
                    <el-icon><setting /></el-icon>
                    <span>个人信息</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <!-- 主体 -->
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  
  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  
  <style>
  .el-menu--horizontal > .el-menu-item:nth-child(1) {
    margin-right: auto;
  }
  .logo{
    padding-left: 0;
    width: 200px;
    font-size: 26px;
    font-weight:900;
  }
  .el-menu-vertical-demo{
    width: 180px;
    height: 700px;
  }
  .el-avatar{
    display:flex;
    margin-top: 5px;
  }
  </style>